<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <div>
          <el-button
            type="primary"
            size="mini"
            @click="showDialog = true"
          >添加区域</el-button>
        </div>
        <el-table :data="list">
          <!-- 放置列 -->
          <el-table-column align="center" width="100" label="序号">
            <template v-slot="{ $index, row }">
              <span>{{ getTableRowIndex(row, $index) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="areaName"
            align="center"
            width="200"
            label="区域名称"
          />
          <el-table-column
            prop="spaceNumber"
            align="center"
            width="100"
            label="车位数(个)"
          />
          <el-table-column
            prop="areaProportion"
            align="center"
            width="200"
            label="面积(m²)"
          />
          <el-table-column
            prop="ruleId"
            align="center"
            width="200"
            label="计费规则"
          >
            <template v-slot="{ row }">
              <span v-if="row.ruleId === 1">分段计费</span>
              <span v-else-if="row.ruleId === 2">按次计费</span>
              <span v-else-if="row.ruleId === 3">按分钟计费</span>
              <span v-else-if="row.ruleId === 4">按小时计费</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" align="center" label="备注" />
          <el-table-column align="center" label="操作">
            <template v-slot="{ row }">
              <el-button
                size="mini"
                type="text"
                @click="compile(row)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="text"
                @click="del(row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :total="pageParams.total"
            :page-size="pageParams.pageSize"
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 50, 100]"
            layout="total,  prev,  pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="currentChange"
          />
        </div>
      </el-card>
    </div>
    <!-- 弹窗 -->
    <el-dialog width="600px" :title="title" :visible.sync="showDialog">
      <!-- 表单内容 -->
      <el-form
        ref="formDate"
        label-width="100px"
        :label-position="labelPosition"
        :rules="rules"
        :model="formDate"
      >
        <el-form-item class="el-form-a" label="区域名称" prop="areaName">
          <el-input
            v-model="formDate.areaName"
            style="width: 400px"
            placeholder="请输入区域名称"
          />
        </el-form-item>
        <el-form-item class="el-form-a" label="车位个数" prop="spaceNumber">
          <el-input
            v-model="formDate.spaceNumber"
            style="width: 400px"
            placeholder="请输入车位个数"
          />
        </el-form-item>
        <el-form-item class="el-form-a" label="面积" prop="areaProportion">
          <el-input
            v-model="formDate.areaProportion"
            style="width: 400px"
            placeholder="请输入面积"
          />
          <span style=" margin-left: 10px;">m²</span>
        </el-form-item>
        <el-form-item class="el-form-a" label="关联计费规则" prop="ruleId">
          <el-select
            v-model="formDate.ruleId"
            placeholder="请输入"
            style="width: 400px"
            size="medium"
            class="kuan"
          >
            <el-option label="分段收费" :value="1" />
            <el-option label="按次计费" :value="2" />
            <el-option label="按分钟计费" :value="3" />
            <el-option label="按小时计费" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item class="el-form-a" label="备注" prop="remark">
          <el-input
            v-model="formDate.remark"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex">
            <el-col class="el-row-right">
              <el-button
                type="primary"
                size="mini"
                @click="submit"
              >确定</el-button>
              <el-button size="mini" @click="cleats">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getAreaList, postAreaList, putAreaList, deleteArea } from '@/api/TrafficManagement/area'
export default {
  name: 'Area',
  data() {
    return {
      pageParams: {
        page: 1,
        pageSize: 10,
        total: 1
      },
      formDate: {
        areaName: '', // 区域名称
        spaceNumber: '', // 车位数
        areaProportion: '', // 面积
        ruleId: '', // 关联计费的id
        remark: ''// 备注
      },
      value: '',
      rules: {
        areaName: [
          { required: true, message: '请输入区域名称', trigger: 'change' }
        ],
        spaceNumber: [
          { required: true, message: '请输入车位数', trigger: 'change' }
        ],
        areaProportion: [
          { required: true, message: '请输入面积', trigger: 'change' }
        ],
        ruleId: [
          { required: true, message: '请输入车位数', trigger: 'blur' }
        ]
      },
      list: [],
      title: '添加区域',
      labelPosition: 'top',
      showDialog: false // 显示弹窗

    }
  },
  computed: {
    // 首先，将list数组克隆一份，并使用计算属性对克隆后的数据进行处理。
    // paginatedList计算属性对克隆后的数据进行分页处理
    // 使用JSON.parse(JSON.stringify(this.list))来对数组进行深拷贝，这是为了避免直接引用和修改原始数据。
    paginatedList() {
      const startIndex = (this.pageParams.page - 1) * this.pageParams.pageSize
      const endIndex = startIndex + this.pageParams.pageSize
      const clonedList = JSON.parse(JSON.stringify(this.list)) // 克隆数据集合
      return clonedList.slice(startIndex, endIndex)
    }

  },
  created() {
    // 渲染页面
    this.getAreaList()
  },
  methods: {
    // 渲染页面
    async getAreaList() {
      const res = await getAreaList({ page: this.pageParams.page, pageSize: this.pageParams.pageSize })
      this.list = res.data.rows
      this.pageParams.total = res.data.total
    },

    // 添加区域  确认按钮
    async submit() {
      // 校验表单
      this.$refs.formDate.validate()
      if (this.title === '添加区域') {
        // 发送请求
        await postAreaList(this.formDate)
        // 弹出提示
        this.$message.success('添加成功')
      } else if (this.title === '编辑区域') {
        // 发送请求
        await putAreaList(this.formDate)
        // 弹出提示
        this.$message.success('编辑成功')
      }
      // 清空表单
      this.$refs.formDate.resetFields()
      // 关闭弹窗
      this.showDialog = false
      // 刷新数据
      this.getAreaList()
    },
    // 取消按钮
    cleats() {
      // 清空表单
      this.$refs.formDate.resetFields()
      // 关闭弹窗
      this.showDialog = false
    },
    // 编辑
    compile(row) {
      this.title = '编辑区域'
      this.showDialog = true

      // 映射对象
      const ruleIdToLabel = {
        1: '分段收费',
        2: '按次计费',
        3: '按分钟计费',
        4: '按小时计费'
      }
      // 判断 当前的row.ruleId 等于几，显示对应的数据
      const ruleLabel = ruleIdToLabel[row.ruleId] || ''
      this.value = ruleLabel

      // 回填表单
      this.formDate.id = row.id
      this.formDate.areaName = row.areaName
      this.formDate.spaceNumber = row.spaceNumber
      this.formDate.areaProportion = row.areaProportion
      this.formDate.ruleId = row.ruleId
      this.formDate.remark = row.remark
    },
    // 删除
    async del(row) {
      // 发送请求
      await deleteArea(row.id)
      // 弹出提示
      this.$message.success('删除成功')
      // 刷新页面
      this.getAreaList()
    },

    // 当前页
    currentChange(page) {
      this.pageParams.page = page
      this.getAreaList()
    },
    // 每页数量
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.getAreaList()
    },
    // 让数据按顺序 显示
    // 使用getTableRowIndex方法来计算每行的实际序号，通过将每页显示数量和当前页码应用于每行，我们可以得到正确的序号。
    getTableRowIndex(row, index) {
      const startIndex = (this.pageParams.page - 1) * this.pageParams.pageSize
      return startIndex + index + 1
    }

  }
}
</script>
<style scoped>
.block {
  float: right;
  margin-top: 20px;
}
.el-form-a {
  margin-left: 80px;
}
.el-row-right {
  margin-top: 50px;
  margin-left: 400px;
}
.kuan {
  width: 400px;
}

</style>
